<template>
  <base-load-page :loadState="false" class="base-load-page">
    <template #head>
      <div style="padding-bottom: 15px" class="head-box">
        <div class="left-box">
          <base-input-search
            v-model="filterData.thirdAdvertiserId"
            clearable
            placeholder="请输入账户id"
            style="width: 100%"
            :prefixIcon="IconSearch"
            @submit="getAxiosData(true)"
          ></base-input-search>
          <base-input-search
            v-model="filterData.referralLinkId"
            clearable
            placeholder="请输入链接id"
            style="width: 100%"
            :prefixIcon="IconSearch"
            @submit="getAxiosData(true)"
          ></base-input-search>
          <base-input-search
            v-model="filterData.dramaId"
            clearable
            placeholder="请输入短剧id"
            style="width: 100%"
            :prefixIcon="IconSearch"
            @submit="getAxiosData(true)"
          ></base-input-search>
          <bubble-select-local
            v-model="filterData.devicePlatform"
            labelKey="label"
            valueKey="value"
            :filterable="false"
            style="width: 100%"
            :list="[
              { label: '安卓', value: 'android' },
              { label: 'IOS', value: 'ios' },
            ]"
            placeholder="请选择系统平台"
            @change="getAxiosData(true)"
          ></bubble-select-local>
          <bubble-select-local
            v-model="filterData.platform"
            labelKey="label"
            valueKey="value"
            :filterable="false"
            style="width: 100%"
            :list="[
              { label: '抖音', value: 'mp-toutiao' },
              { label: '快手', value: 'mp-kuaishou' },
              { label: '微信', value: 'mp-weixin' },
            ]"
            placeholder="请选择小程序平台"
            @change="getAxiosData(true)"
          ></bubble-select-local>
          <bubble-select-local
            v-model="filterData.payChannel"
            labelKey="label"
            valueKey="value"
            :filterable="false"
            style="width: 100%"
            :list="payType"
            placeholder="请选择支付渠道"
            @change="getAxiosData(true)"
          ></bubble-select-local>
          <base-input-search
            v-model="filterData.appName"
            clearable
            placeholder="请输入小程序名称"
            style="width: 100%"
            :prefixIcon="IconSearch"
            @submit="getAxiosData(true)"
          ></base-input-search>
          <base-date-picker
            v-model="filterData.filterDate"
            valueFormat="YYYY-MM-DD"
            format="YYYY-MM-DD"
            placeholder="请选择回传日期"
            type="date"
            clearable
            @change="getAxiosData(true)"
          ></base-date-picker>
        </div>
      </div>
    </template>
    <el-table ref="elTableRef" v-loading="baseData.loading" border height="100%" :data="tableData" showOverflowTooltip stripe style="width: 100%">
      <template #empty>
        <base-empty :description="description" :pageLoadButton="[{ text: '重新加载', callBack: () => getAxiosData() }]"></base-empty>
      </template>
      <el-table-column
        fixed
        type="index"
        :index="(index: number) => (filterData.current - 1) * filterData.size + index + 1"
        label="编号"
        sortable
        width="60"
        align="center"
        headerAlign="center"
      ></el-table-column>
      <el-table-column label="订单编号" prop="outTradeNo" minWidth="230"></el-table-column>
      <el-table-column label="短剧" prop="" minWidth="200">
        <template #default="{ row }">
          <div class="content-wrap">
            <p>
              短剧ID:
              <span class="highlighted">{{ row.dramaId }}</span>
            </p>
            <p>
              短剧名称:
              <span class="highlighted">{{ row.dramaTitle }}</span>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="账户" prop="" minWidth="160">
        <template #default="{ row }">
          <div class="content-wrap">
            <p>
              账户ID:
              <span class="highlighted">{{ row.thirdAdvertiserId }}</span>
            </p>
            <p>
              账户名:
              <span class="highlighted">{{ row.thirdAdvertiserName }}</span>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="广告" prop="" minWidth="160">
        <template #default="{ row }">
          <div class="content-wrap">
            <p>
              广告ID:
              <span class="highlighted">{{ row.promotionId }}</span>
            </p>
            <p>
              名称:
              <span class="highlighted">{{ row.promotionName || '-' }}</span>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="链接" prop="" width="160">
        <template #default="{ row }">
          <div class="content-wrap">
            <p>
              链接ID:
              <span class="highlighted">{{ row.referralLinkId }}</span>
            </p>
            <p>
              名称:
              <span class="highlighted">{{ row.referralLinkName || '-' }}</span>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="系统平台" prop="devicePlatform" width="90">
        <template #default="{ row }">
          <el-tag v-if="row.devicePlatform === 'android'" key="el-tag-1" type="success" size="small">安卓</el-tag>
          <el-tag v-else-if="row.devicePlatform === 'ios'" key="el-tag-2" type="danger" size="small">苹果</el-tag>
          <span v-else></span>
        </template>
      </el-table-column>
      <el-table-column label="小程序平台" prop="platform" minWidth="100">
        <template #default="{ row }">
          <el-tag v-if="row.platform === 'mp-kuaishou'" key="el-tag-1" size="small">快手</el-tag>
          <el-tag v-else-if="row.platform === 'mp-toutiao'" key="el-tag-2" type="warning" size="small">抖音</el-tag>
          <el-tag v-else-if="row.platform === 'mp-weixin'" key="el-tag-3" type="success" size="small">微信</el-tag>
          <el-tag v-else key="el-tag-4" type="danger" size="small">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="小程序名称" prop="appName" width="120"></el-table-column>
      <el-table-column label="支付方式" prop="payChannel" width="120">
        <template #default="{ row }">
          {{ payType.find((v) => v.value === row.payChannel)?.label || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="付费金额" prop="totalAmount" minWidth="110">
        <template #default="{ row }">
          {{ formatNumberWithMoney(row.totalAmount) }}
        </template>
      </el-table-column>
      <el-table-column label="付费类型" prop="productType" minWidth="110">
        <template #default="{ row }">
          {{ payCategory.find((v) => v.value === row.productType)?.label || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="解锁集数" prop="episodeSeq" minWidth="110"></el-table-column>
      <el-table-column label="是否回传" prop="reportStatus" minWidth="110"></el-table-column>
      <el-table-column label="回传时间" prop="reportStatus" minWidth="110">
        <template #default="{ row }">
          <p>{{ row.createTime?.split('T')?.[0] }}</p>
          <p>{{ row.createTime?.split('T')?.[1] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" minWidth="110"></el-table-column>
    </el-table>
    <template #foot>
      <div class="pagination-box">
        <el-pagination
          v-model:currentPage="filterData.current"
          v-model:pageSize="filterData.size"
          :pageSizes="[20, 30, 40, 50]"
          :disabled="baseData.loading"
          :pagerCount="13"
          layout="total, prev, pager, next, sizes, jumper"
          :total="baseData.total"
          @change="getAxiosData(true)"
        ></el-pagination>
      </div>
    </template>
  </base-load-page>
</template>

<script setup lang="ts">
  import IconSearch from '~icons/ep/search';
  import { type LinkBackRecordItem, type LinkBackRecordRequest, getLinkBackRecord } from '@/api/marketing-management';
  import { formatNumberWithMoney } from '@/utils/numb';
  import dayjs from 'dayjs';

  // const route = useRoute();

  const elTableRef: $RefComp<'ElTable'> = ref(null);
  const baseData = shallowReactive({
    type: 'add' as 'add' | 'edit',
    /** 加载状态 */
    loading: true,
    /** 总数量 */
    total: 0,
  });
  const filterData = ref<LinkBackRecordRequest>({
    current: 1,
    size: 40,
    promotionId: '',
    dramaId: '',
    thirdAdvertiserId: '',
    devicePlatform: '',
    reportStatus: '',
    payChannel: '',
    platform: '',
    appName: '',
    referralLinkId: '',
    filterDate: '',
  });

  const payType = ref([
    { label: '抖音', value: 'DOUYIN' },
    { label: '抖音K币', value: 'DOUYIN-DIAMOND' },
    { label: '支付宝', value: 'ALIPAY' },
    { label: '微信', value: 'WECHAT' },
    { label: '未知', value: 'UNKNOWN' },
  ]);

  const payCategory = ref([
    {
      'label': '充值虚拟币',
      'value': 1,
    },
    {
      'label': '购买会员',
      'value': 2,
    },
    {
      'label': '购买剧集',
      'value': 3,
    },
    {
      'label': '购买全集',
      'value': 4,
    },
    {
      'label': '分享解锁',
      'value': 11,
    },
    {
      'label': '权益券解锁',
      'value': 12,
    },
    {
      'label': '广告解锁',
      'value': 13,
    },
    {
      'label': 'K币解锁',
      'value': 10,
    },
  ]);

  type _TableItem = LinkBackRecordItem & {
    _syncBackLoading?: boolean;
  };

  const tableData: Ref<_TableItem[]> = ref([]);
  const description = ref('');

  onMounted(() => {
    filterData.value.filterDate = dayjs().format('YYYY-MM-DD');
    // filterData.value.referralLinkId = (route.query.referralLinkId as string) ?? '';
    getAxiosData();
  });

  /**
   * 设置表格数据
   */
  async function getAxiosData(showLoading = true) {
    try {
      await nextTick();
      baseData.loading = Boolean(showLoading);
      const res = await getLinkBackRecord({
        ...filterData.value,
        filterDate: filterData.value.filterDate ? filterData.value.filterDate : '',
      });
      tableData.value = res.data.records;
      description.value = '暂无数据';
      filterData.value.current = res.data.current;
      filterData.value.size = res.data.size;
      baseData.total = res.data.total;
      baseData.loading = false;
    } catch (error) {
      baseData.loading = false;
      tableData.value = [];
      description.value = error.msg || '加载失败，-BD001';
    }
  }
</script>

<style lang="scss" scoped>
  .pagination-box {
    @include flex(row, nowrap, center, center, center);
    padding-top: 15px;
  }

  .head-box {
    @include flex(row, nowrap, flex-start, center, center);

    .left-box {
      display: grid;
      flex: 1;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-gap: 15px;
      margin-right: 15px;
    }
  }

  .content-wrap {
    white-space: wrap;
  }
</style>
